<template>
  <!-- 头部开始 -->
  <div class="login-page">
    <el-form class="login">
      <div class="login-wrap">
        <router-link to="/home">
          <img class="login-header" src="./images/login.jpg" alt="" />
        </router-link>
        <span class="login-account">小米账号</span>
      </div>
      <div class="login-nav">
        <a href=""><span class="login-agreement">用户协议</span></a>
        <a><span class="login-privacy">隐私政策</span></a>
        <a><span class="login-help">帮助中心</span></a>
        <span class="login-help">|</span>
        <select name="‎中文(简体)‎ " id="" class="login-language">
          <option value="">‎中文(简体)‎</option>
          <option value="">‎‎中文(繁體)‎</option>
          <option value="">‎English</option>
        </select>
      </div>
    </el-form>
    <!-- 头部结束 -->

    <!-- 中间开始 -->
    <div class="middle">
      <div class="login-middle">
        <div class="login-user">
          <div class="login-userHeader">
            <div class="login-userLanding">
              <router-link to="login"> 登录 </router-link>
              <span class="register-line"></span>
              <router-link to="register">注册</router-link>
            </div>
          </div>
          <div>
            <ValidationObserver v-slot="{ handleSubmit }">
              <form @submit.prevent="handleSubmit(submit)">
                <ValidationProvider
                  class="input-text clearFix"
                  rules="phone|phoneRequired"
                  mode="lazy"
                  tag="div"
                  v-slot="{ errors }"
                >
                  <input
                    class="login-input"
                    type="text"
                    placeholder="邮箱/手机号码/小米ID"
                    v-model="user.phone"
                  />
                  <i class="errorStyle">{{ errors[0] }}</i>
                </ValidationProvider>
                <ValidationProvider
                  class="input-text clearFix"
                  rules="password|passwordRequired"
                  mode="lazy"
                  tag="div"
                  v-slot="{ errors }"
                >
                  <input
                    class="login-input"
                    type="password"
                    name="mima"
                    id="password"
                    placeholder="请输入密码"
                    v-model="user.password"
                  />
                  <i class="errorStyle">{{ errors[0] }}</i>
                </ValidationProvider>
                <div class="login-checkbox">
                  <!-- 同意验证 -->
                  <ValidationProvider
                    class="controls"
                    rules="verify"
                    v-slot="{ errors }"
                    tag="div"
                    mode="lazy"
                  >
                    <input
                      class="checkbox"
                      type="checkbox"
                      v-model="user.isVerify"
                    />
                    <div class="errorStyle">{{ errors[0] }}</div>
                  </ValidationProvider>
                  <span>
                    已阅读并同意小米帐号
                    <a
                      href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
                    >
                      用户协议
                    </a>
                    和<a href="https://privacy.mi.com/miaccount/zh_CN/">
                      隐私政策</a
                    >
                  </span>
                </div>
                <div>
                  <button class="login-button">登录</button>
                </div>
              </form>
            </ValidationObserver>
          </div>

          <div class="login-helps">
            <span class="a-help">忘记密码?</span>
            <span class="a-helps">手机号登录</span>
          </div>
          <div class="login-other">
            <div class="login-prompt">
              <span>其他方式登录</span>
            </div>
            <div class="login-Imgs">
              <img class="login-logo" src="./images/zhifubao.jpg" alt="" />
              <img class="login-logo" src="./images/weixin.jpg" alt="" />
              <img class="login-logo" src="./images/qq.jpg" alt="" />
              <img class="login-logo" src="./images/weibo.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入action
import { mapActions } from "vuex"
// 我们需要引入检验
import { ValidationObserver, ValidationProvider } from "vee-validate"
// 引入检验规则
import "@/utils/rules"
export default {
  data() {
    return {
      //user对象搜集数据
      user: {
        phone: "",
        password: "",
        isVerify: true,
      },
    }
  },
  // 注册组件
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  // 引入
  methods: {
    ...mapActions("user", ["login"]),
    // 我们在这里处理登陆的流程
    async submit() {
      console.log("我点击了登陆的按钮")
      // 发送请求
      // 我们去结构数据
      const { phone, password } = this.user
      // 发送请求
      console.log("111")
      // 登录
      await this.login({ phone, password })

      console.log("222")
      // 跳转到首页
      this.$router.push("/")
    },
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

/* 头部开始 */
.login-page {
  width: 100%;
  height: 100%;
}
.login {
  /* box-sizing: border-box; */
  width: 100%;
  height: 40px;
  padding: 20px 0;
  /* margin-top: 20px; */
  display: flex;
  justify-content: space-between;
}
.login-wrap {
  box-sizing: border-box;
  height: 40px;
  width: 160px;
}
.login-account {
  font-size: 24px;
  font-weight: 550;
  padding: 10px;
  line-height: 40px;
  align-content: center;
  justify-content: space-between;
  vertical-align: middle;
}
.login-nav {
  float: right;
}
.login-agreement,
.login-privacy,
.login-help {
  font-size: 14px;
  padding: 10px;
  display: inline-block;
  height: 40 px;
  font-weight: 400;
  color: #838383;
  line-height: 40px;
}
/* 头部结束 */

/* 中间开始 */
.middle {
  width: 100%;
  margin-top: 40px;
}
.login-middle {
  width: 450px;
  height: 620px;
  margin: 0 auto;
  padding-top: 30px;
  /* border: 1px solid green; */
  box-shadow: -10px 0px 10px #fbfbfb, /*左边阴影*/ 0px -10px 10px #fbfbfb,
    /*上边阴影*/ 10px 0px 10px #fbfbfb, /*右边阴影*/ 0px 10px 10px #fbfbfb; /*下边阴影*/
}
.login-user {
  width: 360px;
  height: 476.83px;
  margin: 0px auto;
  justify-content: space-between;
}
.login-userLanding {
  width: 100%;
  height: 41px;
  font-size: 22px;
  margin: 20px 0;
}
.login-input {
  height: 60px;
  width: 100%;
  background: #f9f9f9;
  margin: 10px 0;
  border: none;
  // border-block-color: 1px solid pink;
  font-size: 20px;
}
.login-checkbox {
  /* display: flex; */
  margin: 10px 0;
  font-size: 14px;
  vertical-align: middle;
  justify-content: space-between;
}
.checkbox {
  height: 12.67px;
  width: 12.67px;
}
.login-button {
  color: #fff;
  background-color: #ff5c00;
  font-size: 18px;
  width: 100%;
  height: 60px;
  border-width: 0px;
  border-radius: 5px;
  margin: 20px 0;
}
.login-helps {
  width: 100%;
  height: 35.33px;
}
.a-help {
  color: #ff5c00;
  font-size: 17px;
  float: left;
}
.a-helps {
  color: #ff5c00;
  font-size: 17px;
  float: right;
  margin-bottom: 10px 0px;
}
.login-other {
  width: 100%;
  height: 96px;
  box-sizing: border-box;
}
.login-prompt {
  width: 100%;
  height: 40px;
  font-size: 17px;
  text-align: center;
  color: #838383;
}
.login-Imgs {
  width: 100%;
  height: 56px;
  position: relative;
  left: 35px;
}
.login-logo {
  width: 46px;
  height: 46px;
  margin: 12px;
  border-radius: 50%;
  text-align: center;
}
.login-nav :hover {
  color: #ff5c00;
}
.login-language {
  width: 86px;
  height: 40px;
  border-width: 0;
  color: #838383;
  appearance: none; /*去掉下拉箭头*/
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat
    scroll right center transparent;
}
// 检验错误消息
.errorStyle {
  color: red;
}
</style>
